<template>
  <!-- 右侧按钮组件 -->
  <!-- configurationSign:false,//配置标记 -->
  <!-- 用法参考 src\views\baseManage\flBook\index.vue-->
  <!-- 路径：基础管理 > 抄表手册   页面 -->
  <!-- sign  来判断 配置中的这一项的  编辑状态下的显示 和  隐藏 style="float:right;padding:10px;" -->
  <div class="buttons">
    <!-- {{configurationData}} -->
    <!-- {{btnSwitchConfiguration}} -->
    <el-button type="primary" size="mini" plain @click="sunS_Fs" icon="el-icon-search">搜索</el-button>
    <el-button type="primary" size="mini" v-if="isShowEmpty" plain icon="el-icon-refresh-right" @click="emptySearchs">重置</el-button>
    <el-button v-if="btnSwitchConfiguration ? btnSwitchConfiguration : false" type="primary" size="mini" plain icon="el-icon-notebook-2" @click="configurations">配置</el-button>
    <el-button v-if="btnSwitchConfiguration ? btnSwitchConfiguration : false" type="primary" size="mini" plain icon="el-icon-notebook-2" @click="configurationsEmpty">清空当前配置</el-button>
    <!-- ----------------//---------------- -->
    <!-- 弹窗 -->
    <div class="dia" v-if="PZshow">
      <div class="from_inner">
        <!-- {{cloneMainData}} PZshow -->
        <!-- {{btnSwitchSearch}} -->
        <div v-for="(item,index) in cloneMainData " :key="item.EN">
          <!-- v-if="item.configurationSign" cloneMainData -->
          <span>
            <!-- 多选的单项 item.sign=true-->
            <span v-show="item.sign" class="fonts">
              <input class="ic" name="pingguo1" type="checkbox" v-model="item.tableSign" />
              <!-- 文字 -->
              <span>{{item.CN}}</span>
            </span>
            <!-- 输入框的单项 item.sign=false-->
            <span v-show="!item.sign" class="inp">
              <input class="inptext" type="text" v-model="item.CN" />
            </span>
            <!-- 编辑 -->
            <i v-show="item.sign" class="el-icon-s-tools" @click.prevent="BianJi(item,index)"></i>
            <!-- 保存 -->
            <i v-show="!item.sign" class="el-icon-s-cooperation" @click.prevent="BaoCun(item,index)"></i>
            <!-- 向上 -->
            <i v-show="item.sign" class="el-icon-caret-top" @click.prevent="UPFun(item,index)"></i>
            <!-- 向下 -->
            <i v-show="item.sign" class="el-icon-caret-bottom" @click.prevent="DOWNFun(item,index)"></i>
          </span>

        </div>
      </div>
      <el-button type="primary" @click.prevent="SaveFun" style="width:100%" size="mini">保存配置设置</el-button>
    </div>
  </div>
</template>

<script>
import {
  deleteByPath, //清空保存配置
} from '@/api/baseManage/flBook/index'
import PZ from './PZ'
export default {
  components: {
    PZ,
  },
  name: 'buttons',
  props: {
    configurationData: {
      default: () => [],
      type: Array,
    },
    'btn-switch-configuration': {
      type: Boolean,
      default: false,
    },
    isShowEmpty: {
      type: Boolean,
      default: true,
    },
  },
  // ['configurationData', 'btn-switch-configuration', 'isShowEmpty'],
  data() {
    return {
      //配置的弹窗
      PZshow: false,
      //修改按钮的开关
      changeSwich: true,
      //克隆 configurationData 或(searchData)
      cloneMainData: [],
      //多选框
      checklist: undefined,
      //最终要保存的数据-传递给父组件引发视图变化
      OverData: undefined,
    }
  },
  computed: {
    // cmda(){
    //   for(let )
    // }
  },
  created() {
    if (this.configurationData) {
      let cmds = JSON.parse(JSON.stringify(this.configurationData))
      console.log(cmds, 358)
      let newARRs = []
      cmds.forEach((val) => {
        console.log(val['configurationSign'], 322)
        if (
          val.hasOwnProperty('configurationSign') &&
          val['configurationSign']
        ) {
          newARRs.push(val)
        }
      })
      console.log(newARRs, 352)
      this.cloneMainData = newARRs
    }
  },
  watch: {
    //深度监听 configurationData 或(searchData)
    configurationData: {
      deep: true,
      handler(newVal, oldVal) {
        // console.log("深度监听configurationData或(searchData)");
        // console.log(newVal);
        let cmds = JSON.parse(JSON.stringify(newVal))
        let newARRs = []
        cmds.forEach((val) => {
          if (val['configurationSign']) {
            newARRs.push(val)
          }
        })
        this.cloneMainData = newARRs
      },
    },
    //深度监听 cloneMainData 并返回结果给父组件
    cloneMainData: {
      deep: true,
      handler(newVal, oldVal) {
        this.OverData = JSON.parse(JSON.stringify(newVal))
      },
    },
  },
  methods: {
    // 清空配置
    async configurationsEmpty() {
      console.log(this.$route, 555)
      let path = this.$route.path
      let params = {
        path,
      }
      const res = await deleteByPath(params)
      if (res.flag) {
        this.$message({
          message: res.message,
          type: 'success',
        })
        this.$parent.forData(1, 10, {})
      } else {
        this.$message({
          message: res.message,
          type: 'warning',
        })
      }
    },
    //保存配置设置***
    SaveFun() {
      this.$emit('goFatherComponent', this.OverData)
      this.PZshow = false
    },
    //编辑***
    BianJi(item, index) {
      if (item['sign']) {
        item['sign'] = false
      } else {
        console.log('searchData中的sign属性是控制“配置”组件的编辑功能的！')
      }
    },
    //保存***
    BaoCun(item, index) {
      console.log(this.cloneMainData[index].CN)
      console.log(this.cloneMainData)
      this.OverData = JSON.parse(JSON.stringify(this.cloneMainData))
      this.cloneMainData[index].sign = true
    },
    //向上按钮***
    UPFun(item, index) {
      if (index > 0) {
        let pre = this.cloneMainData[index]
        // 改变对象的index 属性
        this.$set(this.cloneMainData, index, this.cloneMainData[index - 1])
        this.$set(this.cloneMainData, index - 1, pre)
        console.log(this.cloneMainData)
      }
    },
    //向下按钮***
    DOWNFun(item, index) {
      console.log(index)
      if (index != this.cloneMainData.length - 1) {
        let pre = this.cloneMainData[index]
        this.$set(this.cloneMainData, index, this.cloneMainData[index + 1])
        this.$set(this.cloneMainData, index + 1, pre)
        console.log(this.cloneMainData)
      }
    },
    //.....其他功能.............
    sunS_Fs() {
      this.$emit('sunS_F', '搜索')
    },
    emptySearchs() {
      this.$emit('emptySearch', '重置')
      this.$bus.emit('goSearchComponents', true)
    },
    //配置按钮
    configurations() {
      // 打开配置弹窗

      this.PZshow = !this.PZshow
    },
    changeFont(item, index) {},
    //第三层组件回调
    goSecondFloor(ContrastData, fontEN) {
      this.$emit('goFirstFlorr', ContrastData, fontEN)
    },
  },
}
</script>
<style lang="scss" scoped>
.buttons {
  position: relative;
  .dia {
    overflow: hidden;
    position: absolute;
    margin-top: 20px;
    background: #ffffff;
    width: 275px;
    border-radius: 3px;
    z-index: 101;
    min-height: 100px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    .from_inner {
      color: #07799a;
      font-weight: 400;
      font-size: 14px;
      max-height: 400px;
      overflow: auto;
      .fonts {
        display: inline-block;
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .inp {
        .inptext {
          display: inline-block;
          width: 150px;
        }
      }

      .ic {
        width: 15px;
        height: 15px;
      }
    }
  }
}
</style>
